<template>
	<view>
		<loading ref="loading"></loading>
		<view class="top">
			<view class="kapian u-flex-col u-row-center u-p-30" >
				<view class="icon" style="position: absolute; top: -30rpx;right: -20rpx;"><image :src="vk.getVuex('$setting.score.icon')"></image></view>
				<view class="shuom u-font-12 u-tips-color">当前可用{{vk.getVuex('$setting.score.name')}}</view>
				<view class="price u-p-t-10">{{vk.getVuex('$user.userInfo.score')}}</view>
			</view>
		</view>
		<view class="u-p-l-30 u-p-r-30" style="position: relative;border-radius: 24rpx 24rpx 0 0;margin-top: 240rpx;" :style="{backgroundColor: vk.getVuex('$app.config.bg.navbar')}">
			<view class="u-p-t-50 u-p-b-50 border-bottom" :style="{borderColor: vk.getVuex('$app.config.color.border')}">
				<u-section :title="vk.getVuex('$setting.score.name')+'明细'" :color="vk.getVuex('$app.config.color.main')" :line-color="vk.getVuex('$app.config.color.sec')" :bold="true" font-size="34" :right="false"></u-section>
			</view>
			<view class="safe-area-inset-bottom">
				<view class="u-flex u-row-between u-col-center border-bottom u-p-t-30 u-p-b-30" v-for="(item,index) in recordList" :key="index" :style="{borderColor: vk.getVuex('$app.config.color.border')}">
					<view class="">
						<view class="comment" :style="{color: vk.getVuex('$app.config.color.main')}">{{item.comment}}</view>
						<view class="u-font-12 u-p-t-10" :style="{color: vk.getVuex('$app.config.color.light')}">{{item._add_time_str}}</view>
					</view>
					<view class="yesNum" v-if="item.type == 1" :style="{color: vk.getVuex('$app.config.color.sec')}">+ {{item.score}}</view>
					<view class="noNum" v-else>- {{item.score}}</view>
				</view>
			</view>
		</view>
		
		<view class="" v-if="!noData">
			<u-loadmore :status="loadStatus" font-size="24" :margin-top="30" :margin-bottom="30" color="#B8B8B8"/>
		</view>
		<nodata v-else height="30vh"></nodata>
		
		<view class="safe-area-inset-bottom">
			<view class="" style="height: 1px;"></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				recordList: [],
				// 无数据
				noData: false,
				// 分页
				pageIndex: 0,
				loadStatus: 'loading',
				userId: ''
			}
		},
		async onLoad() {
			await this.getRecord()
			this.$nextTick(() => {
				this.$refs.loading.closeLoading()
			})
		},
		methods: {
			async getRecord(){
				let that = this
				
				var newList = that.recordList
				that.pageIndex = that.pageIndex + 1
				that.noData = false
				that.loadStatus = 'loading'
				
				let data = await that.vk.callFunction({
					url: 'client/wechat/list/kh/getList',
					data:{
						dbName: 'uni-id-scores',
						pageIndex: that.pageIndex,
						pageSize: 20,
						whereJson: {
							user_id: that.vk.getVuex('$user.userInfo._id')
						},
						sortArr: [{name: '_add_time', type: 'desc'}]
					}
				});
				
				if(data.rows.length === 20) that.loadStatus = 'loadmore'
				else that.loadStatus = 'nomore'
				
				newList = newList.concat(data.rows)
				that.recordList = newList
				
				if(that.recordList.length == 0) that.noData = true
				else that.noData = false
			},
		},
		onReachBottom(){
			let that = this;
			if(that.loadStatus == 'nomore') return
			that.getRecord()
		},
	}
</script>

<style lang="scss">
	.top{
		position: fixed;
		width: 100%;
		top: 0;
		left: 0;
		image{
			width: 180rpx;
			height: 180rpx;
			opacity: 0.6;
		}
		.kapian{
			position: relative;
			height: 260rpx;
			// margin: 30rpx 30rpx 0 30rpx;
			background: linear-gradient(to bottom right, #7a95ee, #7050f0);
			color: #FFFFFF;
			// border-radius: 24rpx;
			overflow: hidden;
			.price{
				font-size: 32px;
				font-weight: 700;
			}
			.shuom{
				color: #E5E5E5;
			}
		}
	}
	.yesNum{
		color: #f8c93c;
		font-weight: 700;
		white-space: nowrap;
		padding-left: 10rpx;
	}
	.noNum{
		color: #d4d4d4;
		font-weight: 700;
		white-space: nowrap;
		padding-left: 10rpx;
	}
	.border-bottom{
		border-bottom: 1rpx solid #282828;
	}
	.title{
		border-left: 8rpx solid #f8c93c;
		padding-left: 15rpx;
		line-height: 34rpx;
		color: #FFFFFF;
	}
	.comment{
		color: #FFFFFF;
	}
</style>
